<!DOCTYPE html>
<html lang="zh-cn"><head>
<title>RainbowC0&#39;s Blog - Hello Hugo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="description"
    content="这是第一篇正式的 Hugo 博文，谨以此记录！ ">
<link rel="canonical" href="https://rainbowc0.gitee.io/post/hello-hugo/" />

<link rel="icon" type="image/x-icon" href="/favicon/favicon.ico">
  



	<link rel="stylesheet"
  href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>


<script>hljs.initHighlightingOnLoad();</script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css">

<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">







<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css">



<link rel="stylesheet" href="/css/hugo-tufte.min.css">

<link rel="stylesheet"  href="/css/hugo-tufte-override.css">



</head>
<body >
        
<div id="layout" class="pure-g">
  <article class="pure-u-1">
    <header class="brand">
  <a href="https://rainbowc0.gitee.io/"><h1>RainbowC0&#39;s Blog</h1></a>
  <h2>惟精惟一，允执厥中。</h2>
  <nav class="menu">
    <ul>
    
        <li><a href="/"><i class="fas fa-home la-lg"></i>HOME</a></li>
    
        <li><a href="/post"><i class="fas fa-book" fa-lg></i>POSTS</a></li>
    
        <li><a href="/categories"><i class="fas fa-tag fa-lg"></i>CATEGORIES</a></li>
    
        <li><a href="/tags"><i class="fas fa-tags fa-lg"></i>TAGS</a></li>
    
        <li><a href="/about"><i class="fas fa-info-circle fa-lg"></i>ABOUT</a></li>
    
        <li><a href="https://gitee.com/RainbowC0/RainbowC0"><i class="fab fa-github fa-lg"></i>SOURCE CODE</a></li>
    
    </ul>
</nav>

  <hr />
</header>

    <section>
  
  <h1 class="content-title">
    
    <a href="/post/hello-hugo/">Hello Hugo</a>
    
  </h1>
  
    
    
      <span class="content-meta">
        
    
            
        
          <i class="fa fa-calendar"></i>
          &nbsp;Nov 6, 2022
        
    
        
          &nbsp;<i class="fa fa-clock-o"></i>
          &nbsp;1 min read
        
    
        
          <br>
          <i class="fa fa-tags"> </i>
          
            <a  href="https://rainbowc0.gitee.io/categories/%E5%8D%9A%E5%AE%A2/%E7%BD%91%E7%AB%99%E5%BB%BA%E8%AE%BE">博客/网站建设</a>
          
        
      </span>
    
  
  </section>
    
<section>
  <details closed class="toc">
    <summary>Contents</summary>
    <nav id="TableOfContents">
  <ul>
    <li><a href="#2022-10-29踏上博客与-hugo">2022-10-29：踏上博客与 Hugo</a></li>
    <li><a href="#2022-10-29选主题">2022-10-29：选主题</a></li>
    <li><a href="#2022-10-30-至-2022-11-6改代码主题">2022-10-30 至 2022-11-6：改代码主题</a></li>
    <li><a href="#2022-11-6大功告成">2022-11-6：大功告成</a></li>
  </ul>
</nav>
  </details>
</section>


    <section><p>这是第一篇正式的 Hugo 博文，谨以此记录！</p>
<hr>
<h2 id="2022-10-29踏上博客与-hugo">2022-10-29：踏上博客与 Hugo</h2>
<p>2022年10月29日，鄙人有幸参加了瓜大腾讯创新俱乐部的线上博客搭建交流会。当时两位学长作为主讲人，给大伙儿演示了 Hugo 博客的搭建流程。从此，我踏上了一条不归路。</p>
<h2 id="2022-10-29选主题">2022-10-29：选主题</h2>
<p>其实我在这之前是做安卓软件的，对安卓的材料设计（Material Design）有所了解。</p>
<p><img src="//img.alicdn.com/imgextra/i2/2202154267212/O1CN01BH0Vpu2399Dcp0EBK_!!2202154267212.jpg" alt="Material Design"></p>
<p>个人觉得材料设计非常棒！调色上很大胆且鲜明，UI 设计上有种视觉层次感，是完全不同于统治国产手机 UI 设计理念的苹果风的另一种酷炫的现代设计理念。（可能是受够了国产“苹果风”后的一种反弹吧？）</p>
<p>最初就想找找可以用的材料设计的主题，然后找着俩感觉不错。一个是 hugo-material-docs，不过官方说这个是写文档用的，而且整体印象不好（材料设计最重要的不是单个 UI 的样式，而是整体的布局以及色彩的搭配，所以感觉很多人用的材料设计都感觉不好）；另一个是 Hugo-MDL，最大的缺点是很久没更新了，导致我的 hugo 无法正常使用该主题。</p>
<p>无奈只好放弃材料设计。然后注意到战神的博客挺简洁的，也很不错，就想着也整一个简洁风的主题，最后找到了 hugo-tufte。这个主题不只简洁干净，还有点而复古感（像是回到了文艺复兴）,感觉一切都很好。但是吧，作为一个码农，主战场还是代码块。看了一下它的代码块——真难看。于是乎，我又走上了改代码主题的不归路。</p>
<h2 id="2022-10-30-至-2022-11-6改代码主题">2022-10-30 至 2022-11-6：改代码主题</h2>
<p>好吧这是最艰难的一段历程。上没学长（懂），下找不到教程。就开始准备改自带的代码高亮渲染器（Chroma）的渲染主题。</p>
<p>但是没用，那个代码框最不能容忍的就是 <code>&lt;pre&gt;</code> 与 <code>&lt;code&gt;</code> 标签有不同的背景色，滑动时还会各自分开。无语。而且这个渲染器用 syntax.scss 渲染后硬把 SCSS 样式挨个加到网页源代码里，这给服务器造成的开销太大了（虽然当时还没部署到服务器）。于是转向用前端渲染代码，比如 highlight.js。</p>
<p>最初在网上到处找方法，最多只有一个怎么用用前端渲染的教程。但我总得先禁用后端的渲染吧？禁用后端渲染这个还真是找不到，麻了。于是我对这个 Hugo 的研究暂停了一阵子。</p>
<p>有幸今天接触到高人战学长啊。果然一问还是有的。禁用 Chroma 渲染代码高亮的设定：</p>
<pre><code class="language-toml">[markup.highlight]
	anchorLineNos = false
	codeFences = false
	guessSyntax = false
	hl_Lines = ''
	lineAnchors = ''
	lineNoStart = ''
	lineNos = false
	lineNumbersInTable = false
	noClasses = false
	style = ''
	tabWith = ''
</code></pre>
<p>然后就可以正常用 highlight.js 渲染了。:-P</p>
<p>添加 highlight.js 高亮，可以在 layouts/partials/[header.html, header.includes.html] 文件内加入如下代码：</p>
<pre><code class="language-html">{{ if .Params.highlight }}
	&lt;link rel=&quot;stylesheet&quot; href=&quot;//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css&quot;&gt;
	&lt;script src=&quot;//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js&quot;&gt;&lt;/script&gt;
	&lt;script&gt;hljs.initHighlightingOnLoad();&lt;/script&gt;
{{ end }}
</code></pre>
<p>并在需要代码的文章开头加上：</p>
<pre><code class="language-markdown">+++
highlight: true
+++
</code></pre>
<p>即可。</p>
<h2 id="2022-11-6大功告成">2022-11-6：大功告成</h2>
<p>现在你们看到的是我目前的 hugo-tufte 主题，还不错吧？</p></section>
    <section>
      <footer class="page-footer">
		<hr>

    <div class="previous-post" style="display:inline-block;">
      
      <a class="link-reverse" href="https://rainbowc0.gitee.io/about/?ref=footer">« 关于</a>
      
    </div>

    <div class="next-post", style="display:inline-block;float:right;">
      
      <a class="link-reverse" href="https://rainbowc0.gitee.io/post/run-x86-on-linux-arm64/?ref=footer">在 Linux ARM64 上高效运行 x86 程序：Box86 »</a>
      
    </div>

		<ul class="page-footer-menu">

      
      

      
      <li><a href="https://github.com/RainbowC0"><i class='fab fa-github fa-lg'></i></a></li>
      

      

      

      

      

      

      

      

      

      

      
      
      
		</ul>

  

	<div class="copyright">
	<p>
    
      &copy; 2024
    .
    All rights reserved.
    
  </p>
</div>
</footer>

    </section>
  </article>
</div>

    </body>

</html>